<template>
  <a-modal
    :title="formTile+'标签'"
    :visible="true"
    width="80%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <div style="    padding: 0 20px 20px 20px;display: flex;justify-content: space-between;">
        <a-radio-group
          size="large"
          @change="changeLabel"
        >
          <a-radio-button
            v-for="tag in labelList"
            :key="tag.id"
            :value="tag.id"
            style="width: 140px;text-align: center;margin-right: 10px;"
          >
            {{ tag.name }}
          </a-radio-button>
        </a-radio-group>
        <a-button
          type="primary"
          size="large"
          :loading="loading"
          @click="submit"
        >提交</a-button>
      </div>
      <div>

      </div>
      <a-card title="已选择用户">
        <a-table
          bordered
          :pagination="false"
          :columns="columns"
          :data-source="dataSource"
          :scroll="{ x: true }"
        >
          <span
            slot="time"
            slot-scope="txt, record"
          >
            {{record.subscribeTime | dateParse}}
          </span>

        </a-table>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
const columns = [
  {
    title: '序号',
    width: 120,
    dataIndex: 'id'
  },
  {
    title: '昵称',
    width: 90,
    dataIndex: 'nickname'
  },
  {
    title: 'open_id',
    dataIndex: 'openid'
  },
  {
    title: '姓名',
    width: 90,
    dataIndex: 'example'
  },
  {
    title: '关注时间',
    width: 200,
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '消息记录',
    width: 100,
    scopedSlots: { customRender: 'news' }
  },
  {
    title: '时间',
    width: 200,
    dataIndex: 'createTime'
  }
]
export default {
  props: {
    content: {
      type: Array,
      default: null
    },
    appid: {
      type: String,
      default: null
    },
    type: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      columns,
      urlKey: 'basemgt-wx',
      dataSource: [],
      labelList: [],
      wxTagListId: '',
      selectedTags: [],
      label: '',
      loading: false
    }
  },

  created() {
    const { content, type } = this.$props
    if (type == 1) {
      this.formTile = '打'
    } else {
      this.formTile = '取消'
    }
    this.dataSource = content
  },

  mounted() {
    this.getLabelList()
  },
  methods: {
    reset() {
      this.dataSource = []
      this.labelList = []
      this.$emit('closeLabel')
    },
    changeLabel(e) {
      this.wxTagListId = e.target.value

      this.$nextTick(() => {
        this.labelList.map(item => {
          console.log(item)
          if (item.id == this.wxTagListId) {
            console.log(item)

            this.label = item.tagId
          }
        })
      })
    },
    getLabelList() {
      const params = {
        appid: this.appid
      }
      postAction(`${this.urlKey}/WxTagList/findWxTagListList`, params).then(data => {
        if (data.code == 200) {
          this.labelList = data.data
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    },
    submit() {
      this.loading = true
      const userInfoList = []
      this.dataSource.map(item => {
        const obj = {
          userId: item.id,
          openid: item.openid
        }
        userInfoList.push(obj)
      })
      var params = {
        appid: this.appid,
        tagId: this.label,
        userInfoList: userInfoList,
        wxTagListId: this.wxTagListId
      }
      try {
        const api = this.type == 1 ? `${this.urlKey}/WxTagList/batchUserMakeTag` : `${this.urlKey}/WxTagList/batchUserCancelTag`
        postAction(api, params).then(data => {
          if (data.code == 200) {
            this.$message.success(this.type == 1 ? '打标签成功！' : '取消标签成功！')

            this.reset()
          } else {
            this.$message.warning(data.msg)
          }
        })
      } catch (error) {
        this.$message.warning('操作失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>


